<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue案例</title>
  <!--引入 vue 的标签-->
  <script src="js/vue.js"></script>
</head>
<body>
  <!--定义视图层的展示区域-->
  <div id="app">

    <table border="1" cellspacing="0" width="60%">
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>成绩</th>
      <th>等级</th>
    </tr>
    
    <!--在第二个 tr 上加上指令-->
    <tr align="center" v-for="(user,index) in users">
      <td>{{index+1}}</td>
      <td>{{user.name}}</td>
      <td>{{user.age}}</td>
      <td>
        <span v-if="user.gender==1">男</span>
        <span v-if="user.gender==2">女</span>
      </td>
      <td>{{user.score}}</td>
      <td>
        <span v-if="user.score>=85">优秀</span>
        <span v-else-if="user.score>=60">良好</span>
        <span style="color: red;" v-else>不及格</span>
      </td>
    </tr>

  </table>
  </div>
  
</body>
<script>
    //定义 vue 对象
    //将 vue 中的数据模型遍历展示在视图层的表格中
   new Vue({
      el:"#app",//vue 接管 的区域
      //定义数据模型
      data:{
        users:[{
          name:"Tom",
          age:20,
          gender:1,
          score:78,
        },{
          name:"Rose",
          age:18,
          gender:2,
          score:86,
        },{
          name:"Jerry",
          age:26,
          gender:1,
          score:90,
        },{
          name:"Tony",
          age:30,
          gender:1,
          score:52,
        }]
      },
      //定义函数
      methods:{
        
      }
   })

</script>
</html>